<template>
  <div class="adminPage">
    <!-- 搜索框 -->
    <div class="search_area">
      <el-form
        :model="params"
        label-width="80px"
        style="display: flex; margin-bottom: 50px"
      >
        <el-form-item label="公告标题">
          <el-input
            clearable
            placeholder="请输入公告标题"
            v-model="params.name"
            style="width: 200px"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item>
          <div class="search-buttons">
            <el-button type="warning" style="margin-left: 10px" @click="search"
              >查询</el-button
            >
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="addNewNotice"
              >新增</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!--表单数据-->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#fafafa',
          color: '#262626',
          fontSize: '14px',
          fontWeight: '500',
          height: '10px',
        }"
      >
        <el-table-column
          prop="name"
          label="公告标题"
          align="center"
        ></el-table-column>
        <el-table-column prop="content" label="公告内容" align="center">
        </el-table-column>
        <el-table-column prop="time" label="更新时间" align="center">
        </el-table-column>
        <!-- 状态 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="editNotice(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除吗？"
              @confirm="deleteNotice(scope.row)"
            >
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNo"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>

      <!-- 新增/编辑 对话框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        custom-class="my-notice-dialog"
      >
        <!-- <span slot="title" class="dialog-header">
          {{ isEdit ? "编辑公告" : "新增公告" }}
        </span> -->
        <template #title>
          <div class="dialog-header">
            {{ isEdit ? "编辑公告" : "新增公告" }}
          </div>
        </template>
        <el-form :model="currentData">
          <el-form-item label="公告标题" label-width="15%">
            <el-input
              clearable
              placeholder="请输入公告标题"
              v-model="currentData.name"
            />
          </el-form-item>
          <el-form-item label="公告内容" label-width="15%">
            <el-input
              clearable
              type="textarea"
              placeholder="请输入公告内容"
              v-model="currentData.content"
            />
          </el-form-item>
        </el-form>
        <span slot="footer">
          <div class="dialog-footer">
            <el-button type="primary" @click="submit">提 交</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { findAllNotice, deleteNotice, addNotice } from "@/api/sys/notice";

export default {
  name: "notice",
  data() {
    return {
      //分页查询参数
      params: {
        pageSize: 10,
        pageNo: 1,
        name: "", // 公告标题
      },
      tableData: [], //表单数据
      loading: false, //加载状态
      total: 0, //数据条数
      isEdit: false, //是否是编辑状态
      currentData: {}, //当前行数据
      dialogVisible: false, //对话框可见状态
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    //加载公告数据
    async loadData() {
      this.loading = true;
      try {
        const res = await findAllNotice(this.params); // const res = await getAuditList(this.params);
        if (res.code === 200) {
          this.tableData = res.data.list || [];
          this.total = res.data.total || 0;
        } else if (res.code === 10001) {
          this.$message.error(res.message);
          this.$store.dispatch("Logout");
        }
      } finally {
        this.loading = false;
      }
    },
    //根据输入模糊查询
    search() {
      this.params.pageNo = 1;
      this.loadData();
    },
    //页码尺寸变化
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNo = 1;
      this.loadData();
    },
    //当前页变化
    handleCurrentChange(pageNo) {
      this.params.pageNo = pageNo;
      this.loadData();
    },
    //删除日志
    async deleteRecord(row) {
      const id = row.id;
      try {
        const res = await deleteNotice(id);
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.loadData();
        } else if (res.code === 10001) {
          this.$message.error(res.message);
          this.$store.dispatch("Logout");
        }
      } catch (error) {
        this.$message.error("删除失败");
      }
    },
    //新增公告
    addNewNotice() {
      this.isEdit = false;
      this.dialogVisible = true;
      this.currentData = {};
    },
    //提交表单
    async submit() {
      const params = this.currentData;
      try {
        const res = await addNotice(params);
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.loadData();
        } else if (res.code === 10001) {
          this.$message.error(res.message);
        }
      } catch (error) {
        this.$message.error("操作失败");
      }
    },
    //编辑公告
    editNotice(row) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.currentData = row;
    },
  },
};
</script>


<style scoped>
.adminPage {
  min-height: 100%;
}

/* TO ASk */
.dialog-header {
  max-height: 50px;
  line-height: 50px;
  width: 100%;
}

:deep .my-notice-dialog .el-dialog__body {
  padding: 5px 10px 0 10px;
}

.dialog-footer {
  max-height: 50px;
  line-height: 50px;
  width: 100%;
}
</style>
